<?php
mysql_query("SET CHARACTER SET utf-8");
mysql_query("SET NAMES utf-8");
?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Small Business Template with Logo for Bootstrap 3</title>

    <!-- Bootstrap core CSS -->
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/fonts.css" rel="stylesheet">
    <link href="assets/css/fonts.min.css" rel="stylesheet">

    <!-- Add custom CSS here -->
    <link href="assets/css/small-business.css" rel="stylesheet">
	
	<script type="text/javascript" src="assets/js/jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="assets/js/jquery.validate.js"></script>
	<script type="text/javascript">

	$(function(){

		$.validator.setDefaults({
		    highlight: function(element) {
		        $(element).closest('.form-group').addClass('has-error');
		    },
		    unhighlight: function(element) {
		        $(element).closest('.form-group').removeClass('has-error');
		    },
		    errorElement: 'span',
		    errorClass: 'help-block',
		    errorPlacement: function(error, element) {
		        if(element.parent('.input-group').length) {
		            error.insertAfter(element.parent());
		        } else {
		            error.insertAfter(element);
		        }
		    }
		});
		var $validator = $("#regForm").validate({
		rules: {
			pass: {
			      minlength: 6,
			      maxlength: 30,
			},
			cpass: {
				equalTo: "#pass",
		      	minlength: 6,
		      	maxlength: 30,
			}
		}
	});
	});
</script>
  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header pull-right">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <!-- You'll want to use a responsive image option so this logo looks good on devices - I recommend using something like retina.js (do a quick Google search for it and you'll find it) -->
          <a class="navbar-brand logo-nav" href="index.html"><img src="assets/img/logo.jpg" style="height:75px; width:150px;"></a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse pull-left">
          <ul class="nav navbar-nav navbar-right">
          <li><a href="register.php">راچستر</a></li>
            <li><a href="#about">تماس با ما</a></li>
            <li><a href="#services">درباره ما</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">کليپ ها <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#contact">کلیپ های تصویری</a></li>
                        <li><a href="#services">کلیپ های صوتی</a></li>
                    </ul>
      </li>

            <li><a href="#contact">کتاب ها</a></li>
            <li class="active"><a href="#contact">صفحه اصلی</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container -->
    </nav>

    <div class="container">
    <div class="row"  id="reg-form" >
    
    <h1>Registeration Form</h1>
    <hr>
	<form role="form" id="regForm" class="col-md-5">
<div class="form-group">
    <label for="exampleInputEmail1">First Name</label>
    <input type="text" name="firstname" class="form-control required" id="" placeholder="e.g John">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail1">Last Name</label>
    <input type="text" name="emailid" class="form-control required" id="" placeholder="e.g. Smith">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" name="email" class="form-control email required" id="" placeholder="e.g. example@domain.com">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" name="pass" class="form-control required" id="pass" placeholder="Password">
  </div>
  
  <div class="form-group">
    <label for="exampleInputPassword1">Confirm Password</label>
    <input type="password" name="cpass" class="form-control required" placeholder="Confirm Password">
  </div>
  
  <button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
     
      <footer>
        <hr>
        <div class="row">
          <div class="col-lg-12">
            <p>Copyright &copy; Company 2013 &middot; Facebook &middot; Twitter &middot; Google+</p>
          </div>
        </div>
      </footer>

    </div><!-- /.container -->

    <!-- Bootstrap core JavaScript -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!-- Make sure to add jQuery - download the most recent version at http://jquery.com/ -->	
    <script src="assets/js/bootstrap.js"></script>
  </body>
</html>